<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            height: 350px;
            background-color: red;
            float: left;
            /* none | right | left */
        }

        .two {
            width: 350px;
            background-color: green;
            float: right;
        }

        .three {
            background-color: blue;
            float: right;
        }

        p {
            height: 100px;
            background-color: green;
            /* clear: both; */
            /* both既清除右浮动，也清除左浮动 */
        }

        .clear {
            height: 0px;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="clear"></div>
    <p></p>
</body>

</html>